<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模型性能评估</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#64748b'
},
borderRadius: {
'none': '0px',
'sm': '4px',
DEFAULT: '8px',
'md': '12px',
'lg': '16px',
'xl': '20px',
'2xl': '24px',
'3xl': '32px',
'full': '9999px',
'button': '8px'
}
}
}
}
</script>
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
.model-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.toast {
position: fixed;
top: 20px;
right: 20px;
padding: 12px 24px;
background-color: #10B981;
color: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
opacity: 0;
transform: translateY(-100%);
transition: all 0.3s ease;
z-index: 9999;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.model-card {
transition: all 0.3s ease;
}
.custom-switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #3b82f6;
}
input:checked + .slider:before {
transform: translateX(20px);
}
.custom-checkbox {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
}
.custom-checkbox input {
opacity: 0;
width: 0;
height: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: 2px solid #d1d5db;
border-radius: 4px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #3b82f6;
border-color: #3b82f6;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-radio {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
}
.custom-radio input {
opacity: 0;
width: 0;
height: 0;
}
.radiomark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: 2px solid #d1d5db;
border-radius: 50%;
}
.custom-radio input:checked ~ .radiomark {
border-color: #3b82f6;
}
.radiomark:after {
content: "";
position: absolute;
display: none;
}
.custom-radio input:checked ~ .radiomark:after {
display: block;
}
.custom-radio .radiomark:after {
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3b82f6;
}
.custom-range {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 5px;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
}
.custom-range::-moz-range-thumb {
width: 16px;
height: 16px;
background: #3b82f6;
border-radius: 50%;
cursor: pointer;
}
.tab-active {
color: #3b82f6;
border-bottom: 2px solid #3b82f6;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 顶部导航 -->
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
<div class="flex items-center justify-between px-6 py-3">
<div class="flex items-center">
<h1 class="text-2xl font-['Pacifico'] text-primary">logo</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
<div class="absolute left-3 top-2.5 w-4 h-4 flex items-center justify-center text-gray-400">
<i class="ri-search-line"></i>
</div>
</div>
<div class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-50 text-primary">
<i class="ri-notification-3-line"></i>
</div>
<div class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-50 text-primary">
<i class="ri-settings-3-line"></i>
</div>
<div class="flex items-center">
<img src="https://readdy.ai/api/search-image?query=professional%2520headshot%2520of%2520a%2520young%2520asian%2520man%2520with%2520short%2520black%2520hair%252C%2520business%2520casual%2520attire%252C%2520neutral%2520background%252C%2520high%2520quality%2520portrait&width=80&height=80&seq=1&orientation=squarish" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
<span class="ml-2 text-sm font-medium text-gray-700">陈思远</span>
</div>
</div>
</div>
</header>
<!-- 左侧菜单栏 -->
<aside class="fixed left-0 top-[57px] bottom-0 w-64 bg-white border-r border-gray-200 overflow-y-auto">
<nav class="py-4">
<div class="space-y-1">
<!-- 模型管理 -->
<div>
<button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-primary hover:bg-blue-50 group">
<div class="flex items-center">
<i class="ri-apps-line mr-3"></i>
<span>模型管理</span>
</div>
<i class="ri-arrow-down-s-line"></i>
</button>
<div class="ml-4 pl-4 border-l border-gray-200">
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/a4a56980-4c92-4089-9e55-c16717a4c6a2" data-readdy="true" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
模型生命周期
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-primary bg-blue-50 rounded-md">
模型性能评估
</a>
<a href="https://readdy.ai/home/42b69b4b-e314-4f8d-9e2f-98a4952face1/1aa2c0c3-fdb6-405e-80c6-bf8d328e590e" data-readdy="true" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
模型转换适配
</a>
</div>
</div>
<!-- 推理服务 -->
<div>
<div>
<button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 group">
<div class="flex items-center">
<i class="ri-server-line mr-3"></i>
<span>推理服务</span>
</div>
<i class="ri-arrow-right-s-line"></i>
</button>
<div class="ml-4 pl-4 border-l border-gray-200 hidden">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
服务部署
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
服务监控
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
负载均衡
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
服务配置
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-900">
日志管理
</a>
</div>
</div>
</div>
<!-- API 接口 -->
<div>
<button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 group">
<div class="flex items-center">
<i class="ri-code-line mr-3"></i>
<span>API 接口</span>
</div>
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
<!-- 数据处理 -->
<div>
<button class="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 group">
<div class="flex items-center">
<i class="ri-database-2-line mr-3"></i>
<span>数据处理</span>
</div>
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
</div>
</nav>
</aside>
<!-- 主要内容区域 -->
<main class="ml-64 pt-[57px] px-6 py-8">
<!-- 面包屑导航 -->
<div class="flex items-center text-sm text-gray-500 mb-6">
<a href="#" class="hover:text-primary">首页</a>
<span class="mx-2">/</span>
<a href="#" class="hover:text-primary">模型管理</a>
<span class="mx-2">/</span>
<span class="text-gray-700">模型性能评估</span>
</div>
<!-- 页面标题和操作按钮 -->
<div class="flex justify-between items-center mb-8">
<h1 class="text-2xl font-bold text-gray-900">模型性能评估</h1>
<div class="flex space-x-3">
<button class="flex items-center px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-add-line"></i>
</div>
新建评估任务
</button>
</div>
</div>
<!-- 性能概览卡片 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg shadow-sm metric-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm font-medium text-gray-500">整体性能评分</p>
<p class="text-2xl font-bold text-gray-900 mt-1">92.5</p>
</div>
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary">
<i class="ri-bar-chart-box-line ri-lg"></i>
</div>
</div>
<div class="mt-4">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 92.5%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">较上月 <span class="text-green-500">+2.3</span></p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm metric-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm font-medium text-gray-500">关键指标达成率</p>
<p class="text-2xl font-bold text-gray-900 mt-1">85.7%</p>
</div>
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-green-50 text-green-500">
<i class="ri-checkbox-circle-line ri-lg"></i>
</div>
</div>
<div class="mt-4">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-green-500 h-1.5 rounded-full" style="width: 85.7%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">较上月 <span class="text-green-500">+5.2%</span></p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm metric-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm font-medium text-gray-500">性能异常数量</p>
<p class="text-2xl font-bold text-gray-900 mt-1">3</p>
</div>
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-yellow-50 text-yellow-500">
<i class="ri-error-warning-line ri-lg"></i>
</div>
</div>
<div class="mt-4">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 15%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">较上月 <span class="text-red-500">+1</span></p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm metric-card">
<div class="flex justify-between items-start">
<div>
<p class="text-sm font-medium text-gray-500">待优化指标数量</p>
<p class="text-2xl font-bold text-gray-900 mt-1">5</p>
</div>
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-red-50 text-red-500">
<i class="ri-tools-line ri-lg"></i>
</div>
</div>
<div class="mt-4">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-red-500 h-1.5 rounded-full" style="width: 25%"></div>
</div>
<p class="text-xs text-gray-500 mt-2">较上月 <span class="text-green-500">-2</span></p>
</div>
</div>
</div>
<!-- 性能指标详情 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-medium text-gray-900">准确率趋势</h2>
<div class="flex space-x-2">
<button class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
<button class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
<button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
</div>
</div>
<div id="accuracyTrendChart" class="h-64"></div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-medium text-gray-900">召回率分析</h2>
<div class="flex space-x-2">
<button class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">7天</button>
<button class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded-full hover:bg-gray-200">30天</button>
<button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">全部</button>
</div>
</div>
<div id="recallAnalysisChart" class="h-64"></div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-medium text-gray-900">F1值统计</h2>
<div class="flex space-x-2">
<button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">查看详情</button>
</div>
</div>
<div id="f1ScoreChart" class="h-64"></div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-center mb-6">
<h2 class="text-lg font-medium text-gray-900">混淆矩阵</h2>
<div class="flex space-x-2">
<select class="pl-3 pr-8 py-1 text-xs font-medium border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
<option>智能推荐模型</option>
<option>图像识别模型</option>
<option>NLP 对话模型</option>
</select>
</div>
</div>
<div id="confusionMatrixChart" class="h-64"></div>
</div>
</div>
<!-- 性能对比分析 -->
<div class="bg-white rounded-lg shadow-sm mb-8">
<div class="flex justify-between items-center p-6 border-b border-gray-100">
<h2 class="text-lg font-medium text-gray-900">性能对比分析</h2>
</div>
<div class="p-6">
<div class="mb-6">
<div class="flex items-center mb-4">
<h3 class="text-base font-medium text-gray-800">不同版本间的性能对比</h3>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">指标</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">智能推荐 v2.3.5</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">智能推荐 v2.3.4</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">智能推荐 v2.3.3</th>
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">变化</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">准确率</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">92.7%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">91.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">90.8%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 text-center">+1.2%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">召回率</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">88.3%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">87.2%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">86.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 text-center">+1.1%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">F1值</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">90.4%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">89.3%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">88.6%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 text-center">+1.1%</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">推理时间</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">25ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">28ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">30ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 text-center">-3ms</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">内存占用</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">850MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">880MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">900MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 text-center">-30MB</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mb-6">
<div class="flex items-center mb-4">
<h3 class="text-base font-medium text-gray-800">不同模型间的性能对比</h3>
</div>
<div id="modelComparisonChart" class="h-80"></div>
</div>
<div>
<div class="flex items-center mb-4">
<h3 class="text-base font-medium text-gray-800">性能基准比较</h3>
</div>
<div id="benchmarkComparisonChart" class="h-80"></div>
</div>
</div>
</div>
<!-- 性能测试报告 -->
<div class="bg-white rounded-lg shadow-sm mb-8">
<div class="flex justify-between items-center p-6 border-b border-gray-100">
<h2 class="text-lg font-medium text-gray-900">性能测试报告</h2>
<button id="generateReportBtn" class="flex items-center px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">
<div class="w-4 h-4 flex items-center justify-center mr-2">
<i class="ri-file-chart-line"></i>
</div>
生成综合报告
</button>
<!-- 生成综合报告模态框 -->
<div id="generateReportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center p-6 border-b border-gray-100">
<h3 class="text-lg font-medium text-gray-900">生成综合报告</h3>
<button id="closeGenerateReportModal" class="text-gray-400 hover:text-gray-500">
<i class="ri-close-line ri-lg"></i>
</button>
</div>
<div class="p-6">
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">选择模型</label>
<div class="space-y-3">
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">智能推荐模型 v2.3.5</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox">
<span class="text-sm text-gray-700">图像识别模型 v1.8.2</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox">
<span class="text-sm text-gray-700">NLP 对话模型 v3.1.0</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox">
<span class="text-sm text-gray-700">预测分析模型 v1.2.7</span>
</label>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">开始日期</label>
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">结束日期</label>
<input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">报告内容</label>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-3">
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">性能指标分析</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">准确率趋势</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">召回率分析</span>
</label>
</div>
<div class="space-y-3">
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">混淆矩阵</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">性能对比</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="custom-checkbox" checked>
<span class="text-sm text-gray-700">优化建议</span>
</label>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">报告格式</label>
<div class="flex space-x-4">
<label class="flex items-center">
<input type="radio" name="reportFormat" class="custom-radio" checked>
<span class="text-sm text-gray-700">PDF</span>
</label>
<label class="flex items-center">
<input type="radio" name="reportFormat" class="custom-radio">
<span class="text-sm text-gray-700">Excel</span>
</label>
<label class="flex items-center">
<input type="radio" name="reportFormat" class="custom-radio">
<span class="text-sm text-gray-700">Word</span>
</label>
</div>
</div>
<div id="generateProgress" class="hidden">
<div class="mb-4">
<div class="flex justify-between items-center mb-1">
<span class="text-sm font-medium text-gray-700">生成进度</span>
<span class="text-sm text-gray-500" id="progressPercentage">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-primary h-2 rounded-full transition-all duration-300" style="width: 0%" id="progressBar"></div>
</div>
</div>
<p class="text-sm text-gray-500" id="progressStatus">准备生成报告...</p>
</div>
<div class="flex justify-end space-x-3">
<button id="cancelGenerateReport" class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
<button id="startGenerateReport" class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">开始生成</button>
</div>
</div>
</div>
</div>
</div>
<div class="p-6">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报告名称</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试时间</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">测试数据集</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">综合评分</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center rounded bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">智能推荐模型性能报告</div>
<div class="text-xs text-gray-500">REP-20250626-001</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">智能推荐模型 v2.3.5</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-26</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">用户行为数据集 v3.2</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-900 mr-2">92.7</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 92.7%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">通过</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-600 mr-3">查看</button>
<button class="text-primary hover:text-blue-600 export-btn">导出</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center rounded bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">图像识别模型性能报告</div>
<div class="text-xs text-gray-500">REP-20250625-002</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">图像识别模型 v1.8.2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-25</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">图像数据集 v2.5</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-900 mr-2">89.5</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 89.5%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">通过</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-600 mr-3">查看</button>
<button class="text-primary hover:text-blue-600 export-btn">导出</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center rounded bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">NLP 对话模型性能报告</div>
<div class="text-xs text-gray-500">REP-20250624-003</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">NLP 对话模型 v3.1.0</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-24</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">对话语料库 v4.0</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-900 mr-2">78.3</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78.3%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">待优化</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-600 mr-3">查看</button>
<button class="text-primary hover:text-blue-600 export-btn">导出</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center rounded bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">预测分析模型性能报告</div>
<div class="text-xs text-gray-500">REP-20250623-004</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">预测分析模型 v1.2.7</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-23</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">时序数据集 v1.8</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-900 mr-2">85.1</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 85.1%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">通过</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-600 mr-3">查看</button>
<button class="text-primary hover:text-blue-600 export-btn">导出</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-8 h-8 flex items-center justify-center rounded bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line"></i>
</div>
<div>
<div class="text-sm font-medium text-gray-900">语音识别模型性能报告</div>
<div class="text-xs text-gray-500">REP-20250622-005</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">语音识别模型 v2.0.1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-06-22</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">语音数据集 v3.7</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-900 mr-2">91.2</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 91.2%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">通过</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-primary hover:text-blue-600 mr-3">查看</button>
<button class="text-primary hover:text-blue-600 export-btn">导出</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-between items-center mt-6">
<div class="text-sm text-gray-500">
显示 1-5 条，共 15 条
</div>
<div class="flex items-center space-x-2">
<button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 bg-white disabled:opacity-50" disabled>
<i class="ri-arrow-left-s-line"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-primary text-white bg-primary">
1
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
2
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
3
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
<i class="ri-more-line"></i>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-700 bg-white hover:border-primary hover:text-primary">
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
</div>
</div>
</div>
</main>
<!-- 新建评估任务模态框 -->
<div id="newEvaluationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center p-6 border-b border-gray-100">
<h3 class="text-lg font-medium text-gray-900">新建性能评估任务</h3>
<button id="closeNewEvaluationModal" class="text-gray-400 hover:text-gray-500">
<i class="ri-close-line ri-lg"></i>
</button>
</div>
<div class="p-6">
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium text-gray-700">基本信息</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">评估名称</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="输入评估任务名称">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">选择模型</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
<option>智能推荐模型 v2.3.5</option>
<option>图像识别模型 v1.8.2</option>
<option>NLP 对话模型 v3.1.0</option>
<option>预测分析模型 v1.2.7</option>
<option>语音识别模型 v2.0.1</option>
</select>
</div>
</div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-1">评估描述</label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="2" placeholder="输入评估任务的详细描述"></textarea>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium text-gray-700">评估配置</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">数据集</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
<option>用户行为数据集 v3.2</option>
<option>图像数据集 v2.5</option>
<option>对话语料库 v4.0</option>
<option>时序数据集 v1.8</option>
<option>语音数据集 v3.7</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">评估指标</label>
<div class="relative">
<select class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
<option>全部指标</option>
<option>准确率、召回率、F1值</option>
<option>自定义指标</option>
</select>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center mb-3">
<label class="custom-checkbox">
<input type="checkbox" checked>
<span class="checkmark"></span>
</label>
<span class="text-sm text-gray-700">准确率 (Accuracy)</span>
</div>
<div class="flex items-center mb-3">
<label class="custom-checkbox">
<input type="checkbox" checked>
<span class="checkmark"></span>
</label>
<span class="text-sm text-gray-700">精确率 (Precision)</span>
</div>
<div class="flex items-center mb-3">
<label class="custom-checkbox">
<input type="checkbox" checked>
<span class="checkmark"></span>
</label>
<span class="text-sm text-gray-700">召回率 (Recall)</span>
</div>
<div class="flex items-center mb-3">
<label class="custom-checkbox">
<input type="checkbox" checked>
<span class="checkmark"></span>
</label>
<span class="text-sm text-gray-700">F1值 (F1 Score)</span>
</div>
<div class="flex items-center">
<label class="custom-checkbox">
<input type="checkbox" checked>
<span class="checkmark"></span>
</label>
<span class="text-sm text-gray-700">AUC-ROC</span>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium text-gray-700">高级设置</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">评估环境</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
<option>测试环境</option>
<option>生产环境</option>
<option>开发环境</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">资源配置</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-button text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pr-8 appearance-none bg-white">
<option>标准配置</option>
<option>高性能配置</option>
<option>自定义配置</option>
</select>
</div>
</div>
</div>
<div class="flex justify-end space-x-3">
<button id="cancelNewEvaluation" class="px-4 py-2 bg-white border border-gray-300 rounded-button text-sm font-medium text-gray-700 hover:bg-gray-50 whitespace-nowrap !rounded-button">取消</button>
<button class="px-4 py-2 bg-primary text-white rounded-button text-sm font-medium hover:bg-blue-600 whitespace-nowrap !rounded-button">创建评估任务</button>
</div>
</div>
</div>
</div>
<!-- 报告详情模态框 -->
<div id="reportDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center p-6 border-b border-gray-100">
<div class="flex items-center">
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-blue-50 text-primary mr-3">
<i class="ri-file-chart-line ri-lg"></i>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">智能推荐模型性能报告</h3>
<p class="text-sm text-gray-500">REP-20250626-001</p>
</div>
</div>
<div class="flex items-center space-x-3">
<button id="closeReportDetailModal" class="text-gray-400 hover:text-gray-500">
<i class="ri-close-line ri-lg"></i>
</button>
</div>
</div>
<div class="flex border-b border-gray-100">
<button class="report-tab-button px-6 py-3 text-sm font-medium tab-active" data-tab="summary">摘要</button>
<button class="report-tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="metrics">详细指标</button>
<button class="report-tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="analysis">分析建议</button>
<button class="report-tab-button px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="comparison">历史对比</button>
</div>
<div class="p-6">
<!-- 摘要 Tab -->
<div id="summary" class="tab-content active">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<div class="mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-2">测试概述</h4>
<p class="text-sm text-gray-600">
本次性能评估针对智能推荐模型 v2.3.5 版本，使用用户行为数据集 v3.2 进行全面测试，评估了模型在准确率、召回率、F1值等关键指标上的表现。测试结果显示，该模型在所有关键指标上均达到或超过预期目标，整体性能评分为 92.7 分，较上一版本提升了 1.2 分。
</p>
</div>
<div class="mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-2">关键指标</h4>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">准确率</p>
<div class="flex items-center">
<p class="text-sm font-medium text-gray-700 mr-2">92.7%</p>
<span class="text-xs text-green-500">+1.2%</span>
</div>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">召回率</p>
<div class="flex items-center">
<p class="text-sm font-medium text-gray-700 mr-2">88.3%</p>
<span class="text-xs text-green-500">+1.1%</span>
</div>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">F1值</p>
<div class="flex items-center">
<p class="text-sm font-medium text-gray-700 mr-2">90.4%</p>
<span class="text-xs text-green-500">+1.1%</span>
</div>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">AUC-ROC</p>
<div class="flex items-center">
<p class="text-sm font-medium text-gray-700 mr-2">0.95</p>
<span class="text-xs text-green-500">+0.02</span>
</div>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">测试环境</h4>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">硬件环境</p>
<p class="text-sm font-medium text-gray-700">标准测试集群</p>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">软件环境</p>
<p class="text-sm font-medium text-gray-700">PyTorch 2.1.0</p>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">测试时间</p>
<p class="text-sm font-medium text-gray-700">2025-06-26 09:30</p>
</div>
<div class="bg-gray-50 p-3 rounded">
<p class="text-xs text-gray-500">测试人员</p>
<p class="text-sm font-medium text-gray-700">张伟峰</p>
</div>
</div>
</div>
</div>
<div>
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-3">综合评分</h4>
<div class="flex justify-center mb-3">
<div class="relative w-32 h-32">
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-3xl font-bold text-gray-900">92.7</span>
</div>
<div id="scoreGauge" class="w-full h-full"></div>
</div>
</div>
<div class="text-center">
<p class="text-xs text-gray-500">较上一版本 <span class="text-green-500">+1.2</span></p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-3">测试结果</h4>
<div class="flex items-center justify-between mb-3">
<span class="text-sm text-gray-600">整体状态</span>
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">通过</span>
</div>
<div class="flex items-center justify-between mb-3">
<span class="text-sm text-gray-600">达标指标</span>
<span class="text-sm font-medium text-gray-700">5/5</span>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">异常指标</span>
<span class="text-sm font-medium text-gray-700">0</span>
</div>
</div>
</div>
</div>
</div>
<!-- 详细指标 Tab -->
<div id="metrics" class="tab-content">
<div class="mb-6">
<div class="flex justify-between items-center mb-4">
<h4 class="text-lg font-medium text-gray-900">性能指标详情</h4>
<div class="flex space-x-2">
<button class="px-2 py-1 text-xs font-medium text-primary bg-blue-50 rounded-full">导出数据</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">指标名称</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">当前值</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">目标值</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上一版本</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">变化</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">准确率 (Accuracy)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92.7%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.0%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">91.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+1.2%</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">精确率 (Precision)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">91.8%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.0%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.6%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+1.2%</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">召回率 (Recall)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">88.3%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">85.0%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.2%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+1.1%</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">F1值 (F1 Score)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90.4%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">89.3%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+1.1%</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AUC-ROC</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.95</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.90</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.93</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">+0.02</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">推理时间</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28ms</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">-3ms</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">内存占用</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">850MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">900MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">880MB</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-500">-30MB</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">达标</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">混淆矩阵</h4>
<div id="confusionMatrixDetailChart" class="h-64"></div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">ROC 曲线</h4>
<div id="rocCurveChart" class="h-64"></div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">分类详情</h4>
<div id="classificationDetailChart" class="h-80"></div>
</div>
</div>
<!-- 分析建议 Tab -->
<div id="analysis" class="tab-content">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2">
<div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-4">性能分析</h4>
<div class="space-y-4">
<div>
<h5 class="text-sm font-medium text-gray-800 mb-2">优势</h5>
<ul class="list-disc pl-5 space-y-2">
<li class="text-sm text-gray-600">准确率达到 92.7%，超过目标值 2.7 个百分点，表现优异</li>
<li class="text-sm text-gray-600">推理时间较上一版本减少 3ms，性能提升明显</li>
<li class="text-sm text-gray-600">内存占用减少 30MB，资源利用率更高</li>
<li class="text-sm text-gray-600">所有关键指标均达到或超过预期目标</li>
</ul>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-2">不足</h5>
<ul class="list-disc pl-5 space-y-2">
<li class="text-sm text-gray-600">在长尾数据上的召回率仍有提升空间</li>
<li class="text-sm text-gray-600">冷启动场景下的推荐准确率相对较低</li>
<li class="text-sm text-gray-600">模型在新用户数据上的泛化能力有待加强</li>
</ul>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6">
<h4 class="text-sm font-medium text-gray-700 mb-4">优化建议</h4>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-100 text-primary mr-3 flex-shrink-0 mt-1">
<i class="ri-database-2-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">数据优化</h5>
<p class="text-sm text-gray-600">增加长尾数据的采样比例，提高模型在稀疏数据上的表现。建议在训练集中增加 20% 的长尾样本。</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-green-100 text-green-600 mr-3 flex-shrink-0 mt-1">
<i class="ri-code-box-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">算法优化</h5>
<p class="text-sm text-gray-600">考虑引入对比学习方法，增强模型在冷启动场景下的表现。实验表明这可能带来 3-5% 的性能提升。</p>
</div>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-purple-100 text-purple-600 mr-3 flex-shrink-0 mt-1">
<i class="ri-server-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">工程优化</h5>
<p class="text-sm text-gray-600">通过模型量化技术，可以进一步减少内存占用 15-20%，同时保持或略微提升推理速度。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-3">优化优先级</h4>
<div id="optimizationPriorityChart" class="h-64"></div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
<h4 class="text-sm font-medium text-gray-700 mb-3">预期收益</h4>
<div class="space-y-3">
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">准确率提升</span>
<span class="text-xs font-medium text-gray-700">+1.5%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 30%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">召回率提升</span>
<span class="text-xs font-medium text-gray-700">+2.2%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 44%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">推理性能提升</span>
<span class="text-xs font-medium text-gray-700">+15%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 60%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-gray-500">资源占用减少</span>
<span class="text-xs font-medium text-gray-700">-20%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 80%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 历史对比 Tab -->
<div id="comparison" class="tab-content">
<div class="mb-6">
<div class="flex justify-between items-center mb-4">
<h4 class="text-lg font-medium text-gray-900">历史版本对比</h4>
<div>
<select class="pl-3 pr-8 py-1.5 border border-gray-300 rounded-button text-xs focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none bg-white">
<option>对比最近5个版本</option>
<option>对比最近3个版本</option>
<option>自定义对比</option>
</select>
</div>
</div>
<div id="versionComparisonChart" class="h-80"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">准确率趋势</h4>
<div id="accuracyTrendHistoryChart" class="h-64"></div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">性能效率趋势</h4>
<div id="performanceEfficiencyChart" class="h-64"></div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-6">
<div class="flex justify-between items-center mb-4">
<h4 class="text-sm font-medium text-gray-700">版本详细对比</h4>
<button class="text-primary text-sm hover:text-blue-600">导出数据</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">指标</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.5<br><span class="text-gray-400 normal-case">(当前)</span></th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.4</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.3</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.2</th>
<th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">v2.3.1</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">准确率</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">92.7%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">91.5%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.8%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">89.2%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">87.5%</td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">召回率</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.3%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">87.2%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">86.5%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">85.8%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">84.2%</td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">F1值</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.4%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">89.3%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.6%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">87.5%</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">85.8%</td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">推理时间</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">25ms</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">28ms</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">30ms</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">32ms</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">35ms</td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">内存占用</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">850MB</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">880MB</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">900MB</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">920MB</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">950MB</td>
</tr>
<tr>
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">综合评分</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">92.7</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">91.5</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">90.2</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">88.5</td>
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 text-center">86.8</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="text-sm font-medium text-gray-700 mb-4">改进历程分析</h4>
<div class="space-y-4">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-blue-100 text-primary mr-3 flex-shrink-0 mt-1">
<i class="ri-line-chart-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">持续改进趋势</h5>
<p class="text-sm text-gray-600">模型性能在过去5个版本中持续提升，每个版本的综合评分平均提高1.2分。准确率从87.5%提升到92.7%，总体提升了5.2个百分点。</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-green-100 text-green-600 mr-3 flex-shrink-0 mt-1">
<i class="ri-speed-up-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">性能效率优化</h5>
<p class="text-sm text-gray-600">推理时间从35ms减少到25ms，提升了28.6%。内存占用从950MB减少到850MB，节省了10.5%的资源。这表明模型在保持高准确率的同时，资源利用效率也得到了显著提高。</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-start">
<div class="w-8 h-8 flex items-center justify-center rounded-lg bg-purple-100 text-purple-600 mr-3 flex-shrink-0 mt-1">
<i class="ri-focus-3-line"></i>
</div>
<div>
<h5 class="text-sm font-medium text-gray-800 mb-1">关键突破点</h5>
<p class="text-sm text-gray-600">v2.3.3版本引入了注意力机制，使准确率提升了1.6个百分点；v2.3.5版本优化了特征工程，进一步提升了准确率和推理效率。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="chartInitialization">
document.addEventListener('DOMContentLoaded', function() {
// 准确率趋势图
const accuracyTrendChart = echarts.init(document.getElementById('accuracyTrendChart'));
const accuracyTrendOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'value',
min: 85,
max: 95,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
},
series: [
{
name: '准确率',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(87, 181, 231, 1)'
},
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(87, 181, 231, 0.2)'
}, {
offset: 1, color: 'rgba(87, 181, 231, 0.05)'
}]
}
},
data: [87.5, 89.2, 90.8, 91.5, 92.1, 92.7]
}
]
};
accuracyTrendChart.setOption(accuracyTrendOption);
// 召回率分析图
const recallAnalysisChart = echarts.init(document.getElementById('recallAnalysisChart'));
const recallAnalysisOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
legend: {
data: ['整体召回率', '长尾数据召回率'],
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'value',
min: 60,
max: 90,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
},
series: [
{
name: '整体召回率',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(87, 181, 231, 1)'
},
symbol: 'none',
data: [84.2, 85.8, 86.5, 87.2, 87.8, 88.3]
},
{
name: '长尾数据召回率',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(141, 211, 199, 1)'
},
symbol: 'none',
data: [65.5, 68.2, 70.5, 72.8, 74.3, 75.6]
}
]
};
recallAnalysisChart.setOption(recallAnalysisOption);
// F1值统计图
const f1ScoreChart = echarts.init(document.getElementById('f1ScoreChart'));
const f1ScoreOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['F1值'],
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['热门商品', '常规商品', '长尾商品', '新品', '促销品'],
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
}
],
yAxis: [
{
type: 'value',
min: 70,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
}
],
series: [
{
name: 'F1值',
type: 'bar',
barWidth: '60%',
data: [
{ value: 94.5, itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
{ value: 92.3, itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
{ value: 83.7, itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
{ value: 85.2, itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
{ value: 89.8, itemStyle: { color: 'rgba(87, 181, 231, 1)' } }
],
itemStyle: {
borderRadius: [5, 5, 0, 0]
}
}
]
};
f1ScoreChart.setOption(f1ScoreOption);
// 混淆矩阵图
const confusionMatrixChart = echarts.init(document.getElementById('confusionMatrixChart'));
const confusionMatrixOption = {
animation: false,
tooltip: {
position: 'top',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
formatter: function(params) {
return `预测: ${params.data[0]}<br>实际: ${params.data[1]}<br>数量: ${params.data[2]}`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5'],
splitArea: {
show: true
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5'],
splitArea: {
show: true
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f7fbff', 'rgba(87, 181, 231, 1)']
},
textStyle: {
color: '#1f2937'
}
},
series: [
{
name: '混淆矩阵',
type: 'heatmap',
data: [
[0, 0, 95], [0, 1, 3], [0, 2, 1], [0, 3, 0], [0, 4, 1],
[1, 0, 2], [1, 1, 93], [1, 2, 3], [1, 3, 1], [1, 4, 1],
[2, 0, 1], [2, 1, 2], [2, 2, 94], [2, 3, 2], [2, 4, 1],
[3, 0, 0], [3, 1, 1], [3, 2, 2], [3, 3, 96], [3, 4, 1],
[4, 0, 1], [4, 1, 0], [4, 2, 1], [4, 3, 1], [4, 4, 97]
],
label: {
show: true,
color: '#fff'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
confusionMatrixChart.setOption(confusionMatrixOption);
// 模型对比图
const modelComparisonChart = echarts.init(document.getElementById('modelComparisonChart'));
const modelComparisonOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['准确率', '召回率', 'F1值'],
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['智能推荐模型', '图像识别模型', 'NLP 对话模型', '预测分析模型', '语音识别模型'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937',
interval: 0,
rotate: 30
}
}
],
yAxis: [
{
type: 'value',
min: 70,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
}
],
series: [
{
name: '准确率',
type: 'bar',
barGap: 0,
data: [92.7, 89.5, 78.3, 85.1, 91.2],
itemStyle: {
color: 'rgba(87, 181, 231, 1)'
}
},
{
name: '召回率',
type: 'bar',
data: [88.3, 85.2, 75.6, 82.3, 87.5],
itemStyle: {
color: 'rgba(141, 211, 199, 1)'
}
},
{
name: 'F1值',
type: 'bar',
data: [90.4, 87.3, 76.9, 83.7, 89.3],
itemStyle: {
color: 'rgba(251, 191, 114, 1)'
}
}
]
};
modelComparisonChart.setOption(modelComparisonOption);
// 基准对比图
const benchmarkComparisonChart = echarts.init(document.getElementById('benchmarkComparisonChart'));
const benchmarkComparisonOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['当前模型', '行业平均', '最佳实践'],
textStyle: {
color: '#1f2937'
}
},
radar: {
indicator: [
{ name: '准确率', max: 100 },
{ name: '召回率', max: 100 },
{ name: 'F1值', max: 100 },
{ name: '推理速度', max: 100 },
{ name: '内存效率', max: 100 },
{ name: '鲁棒性', max: 100 }
],
radius: '65%',
axisName: {
color: '#1f2937'
},
splitLine: {
lineStyle: {
color: '#e2e8f0'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['#fff', '#f9fafb']
}
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
}
},
series: [
{
name: '性能对比',
type: 'radar',
data: [
{
value: [92.7, 88.3, 90.4, 95, 88, 85],
name: '当前模型',
areaStyle: {
color: 'rgba(87, 181, 231, 0.1)'
},
lineStyle: {
color: 'rgba(87, 181, 231, 1)'
},
itemStyle: {
color: 'rgba(87, 181, 231, 1)'
}
},
{
value: [85, 82, 83.5, 80, 85, 80],
name: '行业平均',
areaStyle: {
color: 'rgba(141, 211, 199, 0.1)'
},
lineStyle: {
color: 'rgba(141, 211, 199, 1)'
},
itemStyle: {
color: 'rgba(141, 211, 199, 1)'
}
},
{
value: [95, 93, 94, 97, 92, 90],
name: '最佳实践',
areaStyle: {
color: 'rgba(251, 191, 114, 0.1)'
},
lineStyle: {
color: 'rgba(251, 191, 114, 1)'
},
itemStyle: {
color: 'rgba(251, 191, 114, 1)'
}
}
]
}
]
};
benchmarkComparisonChart.setOption(benchmarkComparisonOption);
// 窗口大小变化时，重新调整图表大小
window.addEventListener('resize', function() {
accuracyTrendChart.resize();
recallAnalysisChart.resize();
f1ScoreChart.resize();
confusionMatrixChart.resize();
modelComparisonChart.resize();
benchmarkComparisonChart.resize();
});
});
</script>
<script id="reportDetailCharts">
document.addEventListener('DOMContentLoaded', function() {
// 评分仪表盘
const scoreGauge = echarts.init(document.getElementById('scoreGauge'));
const scoreGaugeOption = {
animation: false,
series: [
{
type: 'gauge',
radius: '100%',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 10,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.7, 'rgba(251, 191, 114, 1)'],
[0.85, 'rgba(141, 211, 199, 1)'],
[1, 'rgba(87, 181, 231, 1)']
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '12%',
width: 6,
offsetCenter: [0, '-60%'],
itemStyle: {
color: 'auto'
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 1
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 2
}
},
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: [
{
value: 92.7
}
]
}
]
};
scoreGauge.setOption(scoreGaugeOption);
// 混淆矩阵详情图
const confusionMatrixDetailChart = echarts.init(document.getElementById('confusionMatrixDetailChart'));
const confusionMatrixDetailOption = {
animation: false,
tooltip: {
position: 'top',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
formatter: function(params) {
return `预测: ${params.data[0]}<br>实际: ${params.data[1]}<br>数量: ${params.data[2]}`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5'],
splitArea: {
show: true
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5'],
splitArea: {
show: true
},
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '0%',
inRange: {
color: ['#f7fbff', 'rgba(87, 181, 231, 1)']
},
textStyle: {
color: '#1f2937'
}
},
series: [
{
name: '混淆矩阵',
type: 'heatmap',
data: [
[0, 0, 95], [0, 1, 3], [0, 2, 1], [0, 3, 0], [0, 4, 1],
[1, 0, 2], [1, 1, 93], [1, 2, 3], [1, 3, 1], [1, 4, 1],
[2, 0, 1], [2, 1, 2], [2, 2, 94], [2, 3, 2], [2, 4, 1],
[3, 0, 0], [3, 1, 1], [3, 2, 2], [3, 3, 96], [3, 4, 1],
[4, 0, 1], [4, 1, 0], [4, 2, 1], [4, 3, 1], [4, 4, 97]
],
label: {
show: true,
color: '#fff'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
confusionMatrixDetailChart.setOption(confusionMatrixDetailOption);
// ROC曲线图
const rocCurveChart = echarts.init(document.getElementById('rocCurveChart'));
const rocCurveOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
min: 0,
max: 1,
name: '假正例率',
nameLocation: 'middle',
nameGap: 25,
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'value',
min: 0,
max: 1,
name: '真正例率',
nameLocation: 'middle',
nameGap: 25,
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
series: [
{
name: 'ROC曲线',
type: 'line',
smooth: true,
symbol: 'none',
itemStyle: {
color: 'rgba(87, 181, 231, 1)'
},
lineStyle: {
width: 2
},
data: [
[0, 0],
[0.05, 0.35],
[0.1, 0.55],
[0.2, 0.75],
[0.3, 0.85],
[0.4, 0.9],
[0.5, 0.95],
[0.6, 0.97],
[0.7, 0.98],
[0.8, 0.99],
[0.9, 0.995],
[1, 1]
],
markLine: {
silent: true,
lineStyle: {
color: '#999',
type: 'dashed'
},
data: [[{
coord: [0, 0]
}, {
coord: [1, 1]
}]]
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(87, 181, 231, 0.2)'
}, {
offset: 1, color: 'rgba(87, 181, 231, 0.05)'
}]
}
}
}
]
};
rocCurveChart.setOption(rocCurveOption);
// 分类详情图
const classificationDetailChart = echarts.init(document.getElementById('classificationDetailChart'));
const classificationDetailOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['准确率', '精确率', '召回率', 'F1值'],
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
}
],
yAxis: [
{
type: 'value',
min: 70,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
}
],
series: [
{
name: '准确率',
type: 'bar',
barGap: 0,
data: [95, 93, 94, 96, 97],
itemStyle: {
color: 'rgba(87, 181, 231, 1)'
}
},
{
name: '精确率',
type: 'bar',
data: [94, 92, 93, 95, 96],
itemStyle: {
color: 'rgba(141, 211, 199, 1)'
}
},
{
name: '召回率',
type: 'bar',
data: [92, 90, 91, 93, 94],
itemStyle: {
color: 'rgba(251, 191, 114, 1)'
}
},
{
name: 'F1值',
type: 'bar',
data: [93, 91, 92, 94, 95],
itemStyle: {
color: 'rgba(252, 141, 98, 1)'
}
}
]
};
classificationDetailChart.setOption(classificationDetailOption);
// 优化优先级图
const optimizationPriorityChart = echarts.init(document.getElementById('optimizationPriorityChart'));
const optimizationPriorityOption = {
animation: false,
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
series: [
{
name: '优化优先级',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 8,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold',
color: '#1f2937'
}
},
labelLine: {
show: false
},
data: [
{ value: 40, name: '长尾数据优化', itemStyle: { color: 'rgba(87, 181, 231, 1)' } },
{ value: 30, name: '冷启动优化', itemStyle: { color: 'rgba(141, 211, 199, 1)' } },
{ value: 20, name: '模型量化', itemStyle: { color: 'rgba(251, 191, 114, 1)' } },
{ value: 10, name: '其他优化', itemStyle: { color: 'rgba(252, 141, 98, 1)' } }
]
}
]
};
optimizationPriorityChart.setOption(optimizationPriorityOption);
// 版本对比图
const versionComparisonChart = echarts.init(document.getElementById('versionComparisonChart'));
const versionComparisonOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['准确率', '召回率', 'F1值', '推理时间(ms)', '内存占用(百MB)'],
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['v2.3.1', 'v2.3.2', 'v2.3.3', 'v2.3.4', 'v2.3.5'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937'
}
}
],
series: [
{
name: '准确率',
type: 'bar',
stack: 'metrics',
emphasis: {
focus: 'series'
},
data: [87.5, 89.2, 90.8, 91.5, 92.7],
itemStyle: {
color: 'rgba(87, 181, 231, 1)'
}
},
{
name: '召回率',
type: 'bar',
stack: 'metrics',
emphasis: {
focus: 'series'
},
data: [84.2, 85.8, 86.5, 87.2, 88.3],
itemStyle: {
color: 'rgba(141, 211, 199, 1)'
}
},
{
name: 'F1值',
type: 'bar',
stack: 'metrics',
emphasis: {
focus: 'series'
},
data: [85.8, 87.5, 88.6, 89.3, 90.4],
itemStyle: {
color: 'rgba(251, 191, 114, 1)'
}
},
{
name: '推理时间(ms)',
type: 'line',
yAxisIndex: 0,
data: [35, 32, 30, 28, 25],
itemStyle: {
color: 'rgba(252, 141, 98, 1)'
}
},
{
name: '内存占用(百MB)',
type: 'line',
yAxisIndex: 0,
data: [9.5, 9.2, 9.0, 8.8, 8.5],
itemStyle: {
color: '#a3a3a3'
}
}
]
};
versionComparisonChart.setOption(versionComparisonOption);
// 准确率趋势历史图
const accuracyTrendHistoryChart = echarts.init(document.getElementById('accuracyTrendHistoryChart'));
const accuracyTrendHistoryOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['v2.3.1', 'v2.3.2', 'v2.3.3', 'v2.3.4', 'v2.3.5'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: {
type: 'value',
min: 85,
max: 95,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}%'
}
},
series: [
{
name: '准确率',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(87, 181, 231, 1)'
},
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(87, 181, 231, 0.2)'
}, {
offset: 1, color: 'rgba(87, 181, 231, 0.05)'
}]
}
},
data: [87.5, 89.2, 90.8, 91.5, 92.7]
}
]
};
accuracyTrendHistoryChart.setOption(accuracyTrendHistoryOption);
// 性能效率趋势图
const performanceEfficiencyChart = echarts.init(document.getElementById('performanceEfficiencyChart'));
const performanceEfficiencyOption = {
animation: false,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: '#e2e8f0',
borderWidth: 1,
textStyle: {
color: '#1f2937'
},
axisPointer: {
type: 'cross'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['推理时间', '内存占用'],
textStyle: {
color: '#1f2937'
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['v2.3.1', 'v2.3.2', 'v2.3.3', 'v2.3.4', 'v2.3.5'],
axisLine: {
lineStyle: {
color: '#e2e8f0'
}
},
axisLabel: {
color: '#1f2937'
}
},
yAxis: [
{
type: 'value',
name: '推理时间(ms)',
min: 20,
max: 40,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#e2e8f0',
type: 'dashed'
}
},
axisLabel: {
color: '#1f2937',
formatter: '{value}ms'
}
},
{
type: 'value',
name: '内存占用(MB)',
min: 800,
max: 1000,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: '#1f2937',
formatter: '{value}MB'
}
}
],
series: [
{
name: '推理时间',
type: 'line',
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(87, 181, 231, 1)'
},
symbol: 'none',
data: [35, 32, 30, 28, 25]
},
{
name: '内存占用',
type: 'line',
yAxisIndex: 1,
smooth: true,
lineStyle: {
width: 3,
color: 'rgba(141, 211, 199, 1)'
},
symbol: 'none',
data: [950, 920, 900, 880, 850]
}
]
};
performanceEfficiencyChart.setOption(performanceEfficiencyOption);
// 窗口大小变化时，重新调整图表大小
window.addEventListener('resize', function() {
scoreGauge.resize();
confusionMatrixDetailChart.resize();
rocCurveChart.resize();
classificationDetailChart.resize();
optimizationPriorityChart.resize();
versionComparisonChart.resize();
accuracyTrendHistoryChart.resize();
performanceEfficiencyChart.resize();
});
});
</script>
<script id="modalHandlers">
document.addEventListener('DOMContentLoaded', function() {
// Toast 通知功能
function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.innerHTML = `
    <div class="flex items-center">
      <i class="ri-checkbox-circle-line mr-2"></i>
      <span>${message}</span>
    </div>
  `;
  document.body.appendChild(toast);
  
  setTimeout(() => {
    toast.classList.add('show');
  }, 100);

  setTimeout(() => {
    toast.classList.remove('show');
    setTimeout(() => {
      document.body.removeChild(toast);
    }, 300);
  }, 3000);
}

// 导出按钮点击事件
const exportButtons = document.querySelectorAll('.export-btn');
exportButtons.forEach(button => {
  button.addEventListener('click', function() {
    showToast('导出成功');
  });
});
// 生成报告模态框
const generateReportBtn = document.getElementById('generateReportBtn');
const generateReportModal = document.getElementById('generateReportModal');
const closeGenerateReportModal = document.getElementById('closeGenerateReportModal');
const cancelGenerateReport = document.getElementById('cancelGenerateReport');
const startGenerateReport = document.getElementById('startGenerateReport');
const generateProgress = document.getElementById('generateProgress');
const progressBar = document.getElementById('progressBar');
const progressPercentage = document.getElementById('progressPercentage');
const progressStatus = document.getElementById('progressStatus');
if (generateReportBtn && generateReportModal) {
generateReportBtn.addEventListener('click', function() {
generateReportModal.classList.remove('hidden');
});
}
if (closeGenerateReportModal) {
closeGenerateReportModal.addEventListener('click', function() {
generateReportModal.classList.add('hidden');
resetProgress();
});
}
if (cancelGenerateReport) {
cancelGenerateReport.addEventListener('click', function() {
generateReportModal.classList.add('hidden');
resetProgress();
});
}
if (startGenerateReport) {
startGenerateReport.addEventListener('click', function() {
// 显示进度条
generateProgress.classList.remove('hidden');
startGenerateReport.disabled = true;
startGenerateReport.classList.add('opacity-50');
// 模拟生成进度
let progress = 0;
const interval = setInterval(() => {
progress += 5;
progressBar.style.width = `${progress}%`;
progressPercentage.textContent = `${progress}%`;
// 更新状态文本
if (progress < 30) {
progressStatus.textContent = '正在收集数据...';
} else if (progress < 60) {
progressStatus.textContent = '正在生成图表...';
} else if (progress < 90) {
progressStatus.textContent = '正在整理报告...';
} else {
progressStatus.textContent = '即将完成...';
}
if (progress >= 100) {
clearInterval(interval);
progressStatus.textContent = '报告生成完成！';
// 模拟下载
setTimeout(() => {
const link = document.createElement('a');
link.href = '#';
link.download = '模型性能综合报告.pdf';
link.click();
// 重置并关闭模态框
setTimeout(() => {
generateReportModal.classList.add('hidden');
resetProgress();
}, 500);
}, 500);
}
}, 100);
});
}
function resetProgress() {
if (generateProgress) {
generateProgress.classList.add('hidden');
}
if (progressBar) {
progressBar.style.width = '0%';
}
if (progressPercentage) {
progressPercentage.textContent = '0%';
}
if (progressStatus) {
progressStatus.textContent = '准备生成报告...';
}
if (startGenerateReport) {
startGenerateReport.disabled = false;
startGenerateReport.classList.remove('opacity-50');
}
}
// 侧边栏菜单展开/收起
const menuButtons = document.querySelectorAll('aside button');
menuButtons.forEach(button => {
button.addEventListener('click', function() {
const submenu = this.nextElementSibling;
const arrow = this.querySelector('.ri-arrow-right-s-line, .ri-arrow-down-s-line');
if (submenu) {
submenu.classList.toggle('hidden');
if (arrow) {
if (submenu.classList.contains('hidden')) {
arrow.classList.remove('ri-arrow-down-s-line');
arrow.classList.add('ri-arrow-right-s-line');
} else {
arrow.classList.remove('ri-arrow-right-s-line');
arrow.classList.add('ri-arrow-down-s-line');
}
}
}
});
});
// 初始化时隐藏非激活菜单的子菜单
menuButtons.forEach(button => {
const submenu = button.nextElementSibling;
const arrow = button.querySelector('.ri-arrow-right-s-line, .ri-arrow-down-s-line');
if (submenu && !button.classList.contains('text-primary')) {
submenu.classList.add('hidden');
if (arrow) {
arrow.classList.remove('ri-arrow-down-s-line');
arrow.classList.add('ri-arrow-right-s-line');
}
}
});
// 新建评估任务模态框
const newEvaluationButton = document.querySelector('button:has(.ri-add-line)');
const newEvaluationModal = document.getElementById('newEvaluationModal');
const closeNewEvaluationModal = document.getElementById('closeNewEvaluationModal');
const cancelNewEvaluation = document.getElementById('cancelNewEvaluation');
if (newEvaluationButton && newEvaluationModal) {
newEvaluationButton.addEventListener('click', function() {
newEvaluationModal.classList.remove('hidden');
});
}
if (closeNewEvaluationModal) {
closeNewEvaluationModal.addEventListener('click', function() {
newEvaluationModal.classList.add('hidden');
});
}
if (cancelNewEvaluation) {
cancelNewEvaluation.addEventListener('click', function() {
newEvaluationModal.classList.add('hidden');
});
}
// 报告详情模态框
const reportDetailButtons = document.querySelectorAll('button.text-primary.hover\\:text-blue-600.mr-3');
const reportDetailModal = document.getElementById('reportDetailModal');
const closeReportDetailModal = document.getElementById('closeReportDetailModal');
if (reportDetailButtons.length > 0 && reportDetailModal) {
reportDetailButtons.forEach(button => {
button.addEventListener('click', function() {
reportDetailModal.classList.remove('hidden');
});
});
}
if (closeReportDetailModal) {
closeReportDetailModal.addEventListener('click', function() {
reportDetailModal.classList.add('hidden');
});
}
// 模态框外部点击关闭
window.addEventListener('click', function(event) {
if (event.target === newEvaluationModal) {
newEvaluationModal.classList.add('hidden');
}
if (event.target === reportDetailModal) {
reportDetailModal.classList.add('hidden');
}
});
// 报告详情页 Tab 切换
const reportTabButtons = document.querySelectorAll('.report-tab-button');
const reportTabContents = document.querySelectorAll('.tab-content');
if (reportTabButtons.length > 0) {
reportTabButtons.forEach(button => {
button.addEventListener('click', function() {
const tabName = this.getAttribute('data-tab');
// 移除所有 tab 的激活状态
reportTabButtons.forEach(btn => {
btn.classList.remove('tab-active');
btn.classList.add('text-gray-500');
btn.classList.remove('text-primary');
});
// 激活当前 tab
this.classList.add('tab-active');
this.classList.remove('text-gray-500');
// 隐藏所有 tab 内容
reportTabContents.forEach(content => {
content.classList.remove('active');
});
// 显示当前 tab 内容
document.getElementById(tabName).classList.add('active');
});
});
}
});
</script>
</body>
</html>